* {
    box-sizing: border-box;
}

body {
    font-size: 14px;
    line-height: 22px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    background-color: #f7f7f7;
}
img[alt] {
    font-size: 14px;
    color: #999999;
}
::-webkit-scrollbar{
    width: 2px;
    background: #e8e8e8;
}
::-webkit-scrollbar-thumb{
    background: #dadada;
}
::-webkit-scrollbar-track{

}
a {
    text-decoration: none;
    color: #000000;
    transition: color .5s;
}

a:hover {
    color: #F64A22;
}

input:focus {
    outline: none;
}

textarea {
    resize: none;
}

textarea:focus {
    outline: none;
}

.h640 {
    height: 640px;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

.mt100 {
    margin-top: 100px !important;
}

.pop {
    z-index: 999;
}

.pd27 {
    box-sizing: border-box;
    padding-top: 27px;
}

.clear {
    clear: both;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

.relative-container {
    position: relative;
}


.header2 {
    height: 100px;
    display: flex;
    align-items: center;
    background: #000000;
}


.sim-select {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.sim-select dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    background: #FFFFFF;
    padding: 0 21px;
    border: 1px solid #dadada;
}

.sim-select dt svg {
    transition: all .5s;
}

.sim-select dt.active svg {
    transform: rotate(180deg);
}

.sim-select dd {
    display: none;
    height: 30px;
    line-height: 30px;
    background: #FFFFFF;
    padding: 0 21px;

}

.sim-select dd:hover {
    background: #1e90ff;
    color: #FFFFFF;

}

.gray-bg {
    background: rgb(238, 238, 238);

}

.white-bg {
    background: #FFFFFF;
}

.create-btn {
    display: block;
    cursor: pointer;
    width: 250px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background: #F64A22;
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color .5s;
}

.create-btn:hover {
    background: #f9795c;
    color: #FFFFFF;
}

.customer-service {
    position: fixed;
    width: 190px;
    right: 42px;
    top: 50%;
    margin-top: -147px;
    background: url("../images/service.png") #22222e top center no-repeat;
    z-index: 1;
    overflow: hidden;
    border-radius: 5px;
}

.customer-service-container {
    padding-bottom: 10px;
}

.customer-service .qrcode {
    padding: 45px 0 0 25px;
}

.customer-service .qrcode img {
    display: block;
}

.customer-service .price {
    font-size: 16px;
    color: #21212D;
    padding-top: 59px;
    padding-left: 111px;
}
.customer-service-container .back-btn{
    margin: 20px auto 0 auto;
    width: 162px;
    height: 32px;
    border-radius: 5px;
    background: #303145;
    color: #e9b87a;
    font-size: 12px;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.customer-service-container .back-btn svg{
    margin-right: 5px;
}

.mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none;
}

.menu {
    position: absolute;
    left: 0;
    top: 70px;
    width: 1200px;
    background: #FFFFFF;
    z-index: 999;
    border-radius: 5px;
    display: none;
    padding: 20px 20px 10px 20px;
    box-shadow: 0 1px 19px 2px rgb(0 0 0/10%);
}


.menu .menu-box {
    width: 50%;
}

.menu .menu-box .title {
    font-size: 18px;
    padding-bottom: 10px;
}

.menu .menu-box .links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.menu .menu-box .links a {
    flex: 0 0 33.33%;
    font-size: 14px;
    color: #999999;
    padding-bottom: 8px;
}

.menu .menu-box .links a:hover {
    color: #F64A22;
}

.login-box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 670px;
    transform: translate(-50%, -50%);
    background: url("../../../static/images/modal-background.svg") #EEEEEE;
    border-radius: 5px;
    display: none;
}

.login-box-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-box .close {
    cursor: pointer;
    position: absolute;
    right: 42px;
    top: 42px;
}

.login-box .title {
    font-size: 30px;
    line-height: 38px;
    padding-top: 41px;
    padding-bottom: 10px;
    font-weight: bold;
}

.login-box .login-tips {
    margin-bottom: 20px;
    color: #333333;
    letter-spacing: 2px;
    font-size: 16px;
}

.login-box .qrcode {
    padding-bottom: 34px;
}

.login-box .qrcode img {
    display: block;
}

.login-box .tips {
    color: #999999;
}

.login-box .email-login {
    width: 70%;
    margin: 0 auto;
}

.login-box .email-login input {
    width: 100%;
    display: block;
    height: 50px;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 0 40px;
    margin-bottom: 15px;
    border: none;
    font-size: 16px;
}

.login-box .email-login .input-email {
    background: url("../images/icon-email.svg") #FFFFFF 10px center no-repeat;
}

.login-box .login-btn {
    width: 100%;
    display: flex;
    cursor: pointer;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #F64A22;
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color .5s;
    margin-top: 10px;
    margin-bottom: 15px;
    justify-content: center;
    align-items: center;
}

.login-box .loading {
    background: #f9795c;
}

.login-box .login-btn .loading-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background: url("../images/b-loading.svg") center no-repeat;
    animation: rotation 1s infinite;
    animation-timing-function: linear;
    display: none;
}

.login-box .loading .loading-icon {
    display: block;
}


.login-box .login-btn:hover {
    background: #f9795c;
}

.login-box .social {
    padding: 20px 0;
}

.breadcrumb {
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.breadcrumb a {
    display: flex;
    align-items: center;
}

.breadcrumb a.active {
    color: #F64A22;
}

.breadcrumb img {
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
}

.breadcrumb span {
    color: #999999;
}

.breadcrumb .divider {
    padding: 0 8px;
}

.pagination {
    display: flex;
    padding: 20px 0;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.pagination li {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: none;
}

.pagination li:first-child {
    width: 34px;
    height: 34px;
    background: url("../images/icons-page.png") 0 34px;
}

.pagination li.disabled:first-child {
    width: 34px;
    height: 34px;
    background: url("../images/icons-page.png") 0 0;
}

.pagination li:first-child span {
    display: none;
}

.pagination li:first-child a {
    opacity: 0;
}

.pagination li:last-child {
    width: 34px;
    height: 34px;
    background: url("../images/icons-page.png") 34px 34px;
}

.pagination li:last-child span {
    display: none;
}

.pagination li.disabled:last-child {
    width: 34px;
    height: 34px;
    background: url("../images/icons-page.png") 34px 0;
}

.pagination li:last-child a {
    opacity: 0;
}


.pagination a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: none;
}

.pagination a:hover {
    background: #f64a22;
    color: #FFFFFF;
}

.pagination .active {
    background: #f64a22;
    color: #FFFFFF;
}

.pagination .action {
    width: 34px;
    height: 34px;
    background: #F4F4F4;
    border: 2px solid #D6D6D6;
    border-radius: 50%;
}

.pagination .action svg path {
    fill: #c3c3c3;
}

.pagination .action:hover {
    border: 2px solid #5E5E5E;
    background: #f4f4f4;
}

.pagination .action:hover svg path {
    fill: #5E5E5E;
}

.step-box {
    background: #EFEFEF;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1024px;
    height: 400px;
    border-radius: 5px;
    display: none;
    z-index: 999;
}

.step-box-container {
    position: relative;
    padding: 49px 0 0 0;
}

.step-box .hd {
    text-align: center;
}

.step-box .tips {
    font-size: 18px;
    color: #666666;
}

.step-box .title {
    padding: 16px 0 20px 0;
}

.step-box h2 {
    font-size: 38px;
    font-weight: bold;
}

.step-box .bd {
    padding: 34px 0 0 0;
    width: 545px;
    margin: 0 auto;
}

.step-box .bd input {
    display: block;
    width: 545px;
    height: 51px;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    margin: 12px auto 0;
    padding: 0 0 0 12px;
    color: #A1A1AA;
}

.step-box .btn {
    display: flex;
    width: 130px;
    height: 56px;
    background: #F64A22;
    box-shadow: 0 0 4px 1px rgba(246, 74, 34, 0.52);
    border-radius: 5px;
    color: #FFFFFF;
    line-height: 56px;
    margin: 42px auto 0;
    font-size: 20px;
    font-weight: bold;
    align-items: center;
    transition: background-color .5s;
}

.step-box .btn:hover {
    background-color: #f9795c;
}

.step-box .btn .txt {
    display: flex;
    width: 81px;
    border-right: 1px solid #c82802;
    justify-content: center;
    align-items: center;
}

.step-box .btn .icon {
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-box .btn .arrow {
    display: block;
}

.step-box .close {
    cursor: pointer;
    position: absolute;
    top: 39px;
    right: 39px;
    width: 20px;
    height: 20px;
}

/**首页开始**/
.header-container {
    width: 100%;
    background: #000000;
}

.header-container .container {

}

.navigator {
    padding-top: 27px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.navigator .nav {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    position: relative;
}

.header2 .navigator {
    align-items: center;
    padding-top: 0 !important;
}

.header2 .navigator .nav {
    padding-top: 0;
}

.navigator .nav a {
    color: #FFFFFF;
    display: block;
}

.navigator .nav a.nav-link {
    display: block;
    height: 62px;
    line-height: 62px;
}

.navigator a:hover {
    color: #F64A22;
}

.navigator .active a {
    color: #F64A22;
}

.navigator .nav {
    height: 62px;
    display: flex;
    align-items: center;
}

.navigator .nav ul {
    display: flex;
}

.navigator .logo {
    margin-right: 42px;
}

.navigator .logo a {
    height: 62px;
}

.navigator .logo img {
    display: block;
    height: 62px;
}

.navigator .nav li {
    margin-right: 69px;
    display: flex;
    align-items: center;
}

.navigator .nav .home {
    display: flex;
    align-items: center;
    box-sizing: content-box;
    padding-bottom: 40px;
    margin-top: 40px;
}

.navigator .nav .home a.nav-link {
}

.navigator .nav .home .arrow {
    margin-left: 5px;
    display: block;
    width: 15px;
    height: 15px;
    cursor: pointer;
    transition: all .5s;
}

.navigator .nav .home .active {
    transform: rotate(180deg);
}

.navigator .user-action {
    position: relative;
    height: 62px;
}

.navigator .user-action .avatar {
    display: block;
    width: 46px;
    height: 46px;
}

.navigator .user-action .avatar img {
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 100%;
}

.navigator .user-action-nologin {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigator .user-action {
    display: flex;
    align-items: center;
}

.navigator .user-action .user-menu {
    position: absolute;
    right: 0;
    top: 60px;
    width: 280px;
    background: #FFFFFF;
    box-shadow: 0 8px 27px 0 rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    z-index: 999;
    padding: 0;
    display: none;
}

.navigator .user-action .icon-vip {
    margin-right: 10px;
}

.navigator .user-action .user-menu .user-info {
    padding: 15px 30px;
    display: flex;
    align-items: center;
    font-size: 18px;
}

.navigator .user-action .user-menu .user-info {

}

.navigator .user-action .user-menu .deadline {
    font-size: 12px;
    padding-top: 5px;
}

.navigator .user-action .user-menu .menu-avatar {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin-right: 20px;
}

.navigator .user-action .user-menu .menu-avatar img {
    display: block;
    border-radius: 100%;
}

.navigator .user-action .user-menu .vip-rec {
    margin: 20px 0;
    padding: 0 30px;
}

.navigator .user-action .user-menu .divider {
    height: 2px;
    background: #F6F6F6;
}

.navigator .user-action .user-menu .user-menu-actions {
}

.navigator .user-action .user-menu .user-menu-item {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 0 0 0 60px;
    color: #666666;
}

.navigator .user-action .user-menu .user-menu-item:hover {
    background-color: #EEEEEE;
}

.navigator .user-action .user-menu .user-menu-rec {
    background: url("../images/icon-menu/rec.png") 30px center no-repeat;
}

.navigator .user-action .user-menu .user-menu-design {
    background: url("../images/icon-menu/design.png") 30px center no-repeat;
}

.navigator .user-action .user-menu .user-menu-collect {
    background: url("../images/icon-menu/collect.png") 30px center no-repeat;
}

.navigator .user-action .user-menu .user-menu-account {
    background: url("../images/icon-menu/account.png") 30px center no-repeat;
}

.navigator .user-action .user-menu .user-menu-contact {
    background: url("../images/icon-menu/contact.png") 30px center no-repeat;
}

.navigator .user-action .user-menu .user-menu-exit {
    background: url("../images/icon-menu/exit.png") 30px center no-repeat;
}

.navigator .user-action .user-menu .user-menu-history {
    background: url("../images/icon-menu/history.png") 30px center no-repeat;
}

.header2 .navigator .user-action-nologin {
    padding-top: 0;
    height: auto;
}

.navigator .user-action-nologin a {
    color: #FFFFFF;
}

.navigator .user-action-nologin a:hover {
    color: #F64A22;
}

.search-box {
    color: #FFFFFF;
    margin-top: 67px;
    display: flex;
    flex-direction: row;
}

.search-box .left {
    padding-top: 70px;
    width: 575px;
    margin-right: 140px;
}

.search-box h1 {
    font-size: 48px;
    line-height: 70px;
    font-weight: bold;
}

.search-box .left .tips {
    padding: 0 0 22px 0;
    color: #d0d0d0;
    font-size: 24px;
    line-height: 32px;

}

.search-box .left .tips span {
    color: #f64a22;
    margin: 5px 0;
}

.search-box .left .input {
    width: 575px;
    height: 60px;
    display: flex;
    flex-direction: row;
    font-size: 18px;
}

.search-box .left .input input {
    display: block;
    width: 382px;
    border: none;
    height: 60px;
    padding-left: 11px;
    font-size: 18px;
    margin: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.search-box .left .input .btn {
    cursor: pointer;
    display: block;
    width: 192px;
    height: 60px;
    background: #f64a22;
    line-height: 60px;
    color: #FFFFFF;
    text-align: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: all .5s;
}

.search-box .left .input .btn:hover {
    background: #f9795c;
}

.search-box .right {
    width: 549px;
    height: 456px;
    position: relative;
}

.search-box .right .image-item1 {
    position: absolute;
    top: 26px;
    left: 0;
    width: 180px;
    height: 180px;
    overflow: hidden;
    border-radius: 5px;
}

.search-box .right .image-item2 {
    position: absolute;
    top: 0;
    left: 203px;
    width: 254px;
    height: 254px;
    overflow: hidden;
    border-radius: 5px;
}

.search-box .right .image-item3 {
    position: absolute;
    top: 275px;
    left: 80px;
    width: 306px;
    height: 180px;
    overflow: hidden;
    border-radius: 5px;
}

.search-box .right img {
    border-radius: 5px;
    transition: all .5s;
}

.search-box .right img:hover {
    transform: scale(1.2);
}

.case-box {
    background: #F7F7F7;
    padding-bottom: 99px;
}

.case-box .title {
    padding: 38px 0;
    text-align: center;
    font-size: 38px;
    font-weight: bold;
}

.case-box .tags {
    text-align: center;
}

.case-box .tags a {
    font-size: 16px;
    display: inline-block;
    height: 32px;
    line-height: 26px;
    padding: 0 15px;
    border: 2px solid #5E5E5E;
    border-radius: 15px;
    background: #F7F7F7;
    margin-right: 14px;
    color: #5e5e5e;
    transition: all .5s;
}

.case-box .tags a:last-child {
    margin-right: 0;
}

.case-box .tags a:hover {
    color: #FFFFFF;
    background: #5e5e5e;
}

.case-box .tags a.active {
    color: #FFFFFF;
    background: #5e5e5e;
}

.case-box .images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 40px;
}

.case-box .images-container {
    display: none;
}

.case-box .case-logo-image {
    display: block;
    width: 278px;
    height: 220px;
    overflow: hidden;
    margin: 0 28px 28px 0;
    background: #FFFFFF;
    position: relative;
    z-index: 10;
}
.case-box .case-logo-image .mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    display: none;
    z-index: 9;
}
.case-box .case-logo-image .edit-btn{
    width: 120px;
    height: 40px;
    border-radius: 5px;
    background: #FFFFFF;
    color: #f64a22;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: none;
    z-index: 10;
}
.case-box .case-logo-image .edit-btn img{
    display: block;
    margin-right: 10px;
}
.case-box .case-logo-image:hover .mask{
    display: block;
}
.case-box .case-logo-image:hover .edit-btn{
    display: flex;
}
.case-box .case-logo-image:nth-child(4n){
    margin-right: 0;
}

.case-box .case-logo-image img {
    transition: all .5s;
}

.case-box .case-logo-image img:hover {
    transform: scale(1.2);
}

.case-box .last {
    margin: 0 0 28px 0;
}

.case-box .case-desc {
    margin-top: 69px;
    display: flex;
    flex-direction: row;
}

.case-box .case-desc .left {
    width: 574px;
    margin-right: 80px;
}

.case-box .case-desc .left .hd {
    font-size: 38px;
    font-weight: bold;
    margin-bottom: 27px;
    line-height: 38px;
}

.case-box .case-desc .left .tips {
    font-weight: lighter;
    font-size: 18px;
    color: #666666;
    margin-bottom: 32px;
    line-height: 28px;
}

.case-box .case-desc .right {
    width: 547px;
    height: 327px;
    background: url("../images/site.png") left center no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 66px 0 0 32px;
}

.case-box .case-desc .right .desc-logo {
    display: block;
    width: 148px;
    height: 104px;
    overflow: hidden;
    margin: 0 20px 20px 0;
    background-color: #FFFFFF;
    border-radius: 5px;
}

.case-box .case-desc .right .desc-logo img {
    width: 148px;
    height: 104px;
    background-color: #FFFFFF;
    transition: all .5s;
}

.case-box .case-desc .right .desc-logo img:hover {
    transform: scale(1.2);
}

.case-box .case-desc .right .last {
    margin: 0 0 20px 0;
}

.ad1-box {
    padding: 100px 0;
    background-color: #FFFFFF;
}

.ad1-box .container {
    display: flex;
    flex-direction: row;
}

.ad1-box .left {
    height: 424px;
    overflow: hidden;
}

.ad1-box .left img {
    display: block;
    width: 556px;
    height: 424px;
    margin-right: 86px;
    overflow: hidden;
}

.ad1-box .right {
    width: 556px;
    height: 424px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ad1-box .right .title {
    font-size: 38px;
    line-height: 48px;
    font-weight: bold;
    margin-bottom: 29px;
}

.ad1-box .right .tips {
    font-weight: lighter;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 35px;
    color: #666666;
}

.ad1-box .right .tips .sub-title {
    color: #333333;
}

.ad2-box {
    background: #F7F7F7;
    padding: 100px 0;
}

.ad2-box .container {
    display: flex;
    flex-direction: row;
}

.ad2-box .left {
    width: 603px;
}

.ad2-box .left .title {
    font-size: 38px;
    font-weight: bold;
    line-height: 48px;
}

.ad2-box .left .bd {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 30px;
}

.ad2-box .left dl {
    width: 193px;
    margin-bottom: 10px;
}

.ad2-box .left dt {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 10px;
}

.ad2-box .left dd a {
    font-weight: lighter;
    display: block;
    padding-bottom: 10px;
    color: #666666;
}

.ad2-box .left dd a:hover {
    color: #F64A22;
}

.ad3-box {
    padding: 100px 0;
    background-color: #FFFFFF;
}

.ad3-box .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ad3-box .works-item{
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ad3-box .works-item .title{
    text-align: center;
    padding: 10px 0;
}

.comment-box {
    padding: 100px 0;
    background: #f7f7f7;
}

.comment-box .container {
    position: relative;
}

.comment-box .title {
    text-align: center;
    font-size: 38px;
    font-weight: bold;
    padding-bottom: 40px;
    line-height: 48px;
}

.comment-box .swiper {
    width: 1200px;
    overflow: hidden;
}

.comment-box .swiper .swiper-slide {
    width: 585px;
    height: 192px;
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    padding: 20px;
}

.comment-box .comment-logo {
    margin-right: 21px;
}

.comment-box .comment-logo img {
    display: block;
}

.comment-box .comment-info .username {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 14px;
}

.comment-box .comment-info .content {
    font-weight: lighter;
    font-size: 14px;
    color: #666666;
}

.comment-box .swiper-pagination {
    position: absolute;
    bottom: -32px !important;
}

.comment-box .swiper-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 4px;
    border-radius: 0;
}

.comment-box .swiper-pagination .swiper-pagination-bullet-active {
    background: #f2530f;
}

.ad4-box {
    text-align: center;
    padding-top: 101px;
    height: 500px;
    background: url("../images/bg.png") #FFFFFF center no-repeat;
}

.ad4-box .slogan {
    width: 396px;
    font-size: 40px;
    line-height: 56px;
    margin: 0 auto;
}

.ad4-box .create-btn {
    margin: 59px auto;
}

.tools {
    background: #F64A22;
    height: 100px;
    line-height: 100px;
    font-size: 18px;
    text-align: center;
    color: #FFFFFF;
}

.tools .key-icon {
    display: inline-block;
    width: 47px;
    height: 36px;
    line-height: 36px;
    background: #f7f7f7;
    color: #333333;
    border-radius: 5px;
}

.footer {
    background: #111517;
    font-weight: lighter;
}

.footer .links {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #262c2f;
    padding: 34px 0 24px 0;
    margin-bottom: 18px;
}

.footer .links a {
    color: #FFFFFF;
    margin-right: 60px;
    transition: all .5s;
}

.footer .links a:hover {
    color: #999999;
}

.footer dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.footer dt {
    display: block;
    width: 76px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #262c2f;
    border-radius: 5px;
    color: #f64a22;
    margin: 0 20px 10px 0;
}

.footer dd {
    height: 30px;
    line-height: 30px;
    margin-right: 18px;
    margin-bottom: 10px;
}

.footer dd a {
    display: block;
    color: #999999;
    transition: all .5s;
}

.footer dd a:hover {
    color: #FFFFFF;
}

.footer .copyright {
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #757575;
    border-top: 1px solid #262c2f;
    display: flex;
    justify-content: space-between;
}

.footer .copyright a {
    color: #999999;
}
.footer .copyright .mp-ewm{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer .copyright .mp-ewm img{
    margin-bottom: 10px;
}

.fluid-container {
    width: 100%;
    padding: 0 36px;
    margin: 0 auto;
}

.search-header {
    height: 287px;
    background: url("../images/search_header_bg.png") #1c1c1c center no-repeat;
    background-size: cover;
}

.search-header .slogan {
    padding-top: 45px;
    text-align: center;
    color: #FFFFFF;
}

.search-header .slogan h1 {
    font-size: 48px;
    line-height: 48px;
    padding-bottom: 23px;
}

.search-header .slogan .tips {
    color: #D0D0D0;
    font-size: 18px;
}

.generate-options-box {
    width: 1200px;
    margin: 0 auto;
    border-radius: 5px;
    background: #FFFFFF;
}
.search-page .generate-options-box {
    background: #FFFFFF;
    margin-bottom: 25px;
}

.search-page .generate-options-box .fluid-container {
    position: relative;
}

.search-page .generate-options-box .more {
    display: flex;
    align-items: center;
    font-weight: lighter;
    font-size: 14px;
}

.generate-options-box .container {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 8px;
    background-color: rgb(240, 240, 240);
}

.generate-options-box .sim-font-select{

}
.generate-options-box .sim-font-select dd{
    height: 40px;
    align-items: center;
}

.search-page .generate-options-box .more svg {
    margin-left: 4px;
    transition: all .5s;
}

.search-page .generate-options-box .active svg {
    transform: rotate(180deg);
}

.search-page .generate-options-box .generate-options {
    display: flex;
    color: #666666;
    font-size: 18px;
    font-weight: lighter;
    padding: 15px 0;
}

.search-page .generate-options-box .more-options {
    padding: 0;
}

.search-page .generate-options-box .generate-options input {
    display: block;
    width: 280px;
    height: 50px;
    line-height: 50px;
    background: #FFFFFF;
    font-weight: lighter;
    padding-left: 21px;
    font-size: 18px;
    margin: 0 15px;
    border: 1px solid #dadada;
	box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
}
.search-page .generate-options-box .generate-options input.input-short{
    width: 280px;
}
.search-page .generate-options-container{
    flex: 1;
    padding-right: 25px;
}
.search-page .generate-options-box .generate-options .icon-layout{
    margin-right: 15px;
}

.search-page .generate-options-box .generate-options .icon-layout-ud{
    margin-left: 15px;
}
.search-page .generate-options-box .generate-options .icon-layout-lr{
    margin-right: 25px;
}

.search-page .generate-options-box .generate-options .icon-layout-active svg path{
    fill: #f44026 !important;
}

.search-page .generate-options-box .generate-options .label {
    width: 83px;
    line-height: 50px;
    text-align: right;
    font-size: 16px;
}
.search-page .generate-options-box .generate-options .label-short{
    width: 50px;
}

.search-page .generate-options-box .generate-options select {
    display: block;
    width: 395px;
    height: 50px;
    line-height: 50px;
    background: #F7F7F7;
    border: none;
    border-radius: 5px;
    font-weight: lighter;
    padding: 0 21px;
    font-size: 18px;
    margin: 0 15px;
}

.search-page .generate-options-box .generate-options select:focus {
    border: none;
    outline: none;
}

.search-page .generate-options-box .more-options-container {
    display: none;
    border-top: 1px solid #dadada;
}

.search-page .generate-options-box .btn {
    display: block;
    font-size: 16px;
    width: 80px;
    height: 40px;
    border-radius: 5px;
    background: #F64A22;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    transition: background-color .5s;
	margin: 5px 0 0 0;
}

.search-page .generate-options-box .btn:hover {
    background: #f9795c;
}

.search-page .generate-options-box .sim-select {
    width: 280px;
    margin: 0 15px;
    height: 50px;
    position: relative;
    z-index: 5;
}

.logo-box {

}

.logo-box .list {
}

.logo-box .list li {
    position: relative;

    overflow: hidden;
    background: #FFFFFF;
    width: 278px;
    height: 222px;
    flex-shrink: 0;
    float: left;
    margin-bottom: 30px;
    margin-right: 29px;
    transition: all .5s;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.08);
}

.logo-box .list li.last {
    margin-right: 0;
}

.logo-box .list li:hover {
    box-shadow: 0 1px 19px 2px rgb(0 0 0/15%);
    border-radius: 5px;

}

.logo-box .list li .logo img {
    display: block;
    width: 278px;
    transition: all 0.5s;
    z-index: 2;
    cursor: pointer;
}

.logo-box .list li .bookmark {
    z-index: 550;
    position: absolute;
    top: 14px;
    right: 14px;

}

.logo-box .list li .bookmark svg g {
    fill: #9ea7b3;
    opacity: 0.4;
}

.logo-box .list li .bookmark:hover svg g {
    fill: #f64a22;
    opacity: 1;
}

.logo-box .list li .active svg g {
    fill: #f64a22;
}

.logo-box .list li .tools-bar {
    display: none;
}

.logo-box .list li .tools-bar .tools-bar-container {
    width: 100%;
    position: absolute;
    left: 0;
    height: 106px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    display: flex;
    justify-content: space-between;
    padding: 50px 16px 0 16px;
    bottom: 0;
}

.logo-box .list li .tools-bar a {
    display: block;
    width: 80px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #FFFFFF;
    border-radius: 5px;
    font-size: 14px;
}
.logo-box .list li .meta-score{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 10px;
    line-height: 13px;
}

.logo-box .list li .tools-bar .download {
    color: #f64a22;
}

.page-tips {
    text-align: center;
    padding: 20px 0 60px 0;
    font-size: 14px;
    color: #999999;
}

.words-box-container {
    background: #FFFFFF;
    padding: 52px 0 52px 0;
}

.words-box-container .title {
    text-align: center;
}

.words-box-container .title h2 {
    font-size: 38px;
    margin-bottom: 18px;
}

.words-box-container .tips {
    text-align: center;
    font-size: 16px;
    font-weight: lighter;
    color: #888888;
    margin-bottom: 46px;
}

.words-box-container .words-list {
    margin-bottom: 52px;
}

.words-box-container .words-list .hd {
    height: 25px;
    display: flex;
    align-items: center;
    font-size: 24px;
}

.words-box-container .words-list .hd img {
    margin: 9px;
}

.words-box-container .words-list .bd {
    padding: 30px 0 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.words-box-container .words-list .bd a {
    display: block;
    height: 30px;
    background: #F7F7F7;
    border-radius: 15px;
    padding: 0 15px;
    line-height: 30px;
    color: #999999;
    margin: 0 22px 22px 0;
}

.promote-box {
    height: 271px;
    box-shadow: 0 1px 19px 2px rgba(246, 74, 34, 0.11);
    border-radius: 5px;
    padding: 62px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #FFFFFF;
    width: 90%;
    margin: 0 auto;
}

.promote-box .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 32px;
}

.promote-box .title h2 {
    font-size: 38px;
    font-weight: 400;
}

.promote-box .title img {
    margin-right: 13px;
}

.promote-box .input {
    width: 810px;
    height: 80px;
    background: #F7F7F7;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.promote-box input {
    display: block;
    width: 645px;
    height: 80px;
    line-height: 80px;
    border: none;
    background: #F7F7F7;
    padding: 0 18px;
    font-size: 18px;
}

.promote-box .input .btn {
    width: 160px;
    height: 70px;
    background: #F64A22;
    border-radius: 5px;
    cursor: pointer;
    color: #FFFFFF;
    text-align: center;
    line-height: 70px;
    font-size: 20px;
    transition: background-color .5s;
}

.promote-box .input .btn:hover {
    background: #f9795c;
}

.customer-service2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f64a22;
    color: #FFFFFF;
    padding: 71px 0 0 0;
    z-index: 10;
}

.customer-service2 img {
    width: 156px;
    height: 156px;
}

.customer-service2 .title {
}

.customer-service2 .title h2 {
    font-size: 44px;
}

.customer-service2 .tips {
    padding: 32px 0;
}

.choose-box {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 526px;
    transform: translate(-50%, -50%);
    background: #efefef;
    display: none;
    z-index: 999;
}

.choose-box-container {
    position: relative;
    padding: 55px 0;
}

.choose-box .close {
    cursor: pointer;
    position: absolute;
    top: 39px;
    right: 39px;
    width: 20px;
    height: 20px;
}

.choose-box .title {
    text-align: center;
}

.choose-box .title h2 {
    font-size: 38px;
    font-weight: bold;
    margin-bottom: 20px;
}

.choose-box .tips {
    text-align: center;
    font-size: 18px;
    color: #666666;
    margin-bottom: 30px;
}

.choose-box .bd {
    height: 340px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    padding: 0 33px;
}

.choose-box .bd::-webkit-scrollbar-track {
    background-color: #f6f6f6;
}

.choose-box .bd::-webkit-scrollbar {
    width: 5px;
}

.choose-box .bd::-webkit-scrollbar-thumb {
    background-color: #C1C1C1;
    border-radius: 2px;
}

.choose-box .bd li {
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 5px;
}

.choose-box .bd li a {
    display: block;
}

.choose-box .bd li img {
    display: block;
    width: 100%;
    height: 100%;
}

.logo-box-ad1 {
    padding: 75px 0 85px 0;
}

.logo-box-ad1 .title {
    text-align: center;
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 20px;
}

.logo-box-ad1 .tips {
    text-align: center;
    font-size: 16px;
    color: #888888;
    margin-bottom: 52px;
}

.logo-box-ad1 .bd {
    display: flex;
    flex-direction: row;
}

.logo-box-ad1 .bd .left {
    width: 562px;
    padding-top: 59px;
    margin-right: 157px;
}

.logo-box-ad1 .bd .left h2 {
    font-size: 36px;
    margin-bottom: 25px;
}

.logo-box-ad1 .bd .left .desc {
    font-size: 16px;
    font-weight: lighter;
    color: #888888;
    line-height: 25px;
    margin-bottom: 39px;
}

.logo-box-ad1 .bd .right {
    position: relative;
}

.logo-box-ad1 .bd img {
    display: block;
}

.logo-box-ad1 .bd .logo-item {
    background: #FFFFFF;
    border-radius: 5px;
}

.logo-box-ad1 .bd .logo-item img {
    border-radius: 5px;
    transition: all .5s;
}

.logo-box-ad1 .bd .logo-item img:hover {
    transform: scale(1.2);
}

.logo-box-ad1 .bd .logo-item1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 160px;
    overflow: hidden;
}

.logo-box-ad1 .bd .logo-item2 {
    position: absolute;
    top: 14px;
    left: 232px;
    width: 170px;
    height: 132px;
    overflow: hidden;
}

.logo-box-ad1 .bd .logo-item3 {
    position: absolute;
    top: 194px;
    left: 0;
    width: 170px;
    height: 132px;
    overflow: hidden;
}

.logo-box-ad1 .bd .logo-item4 {
    position: absolute;
    left: 208px;
    top: 183px;
    width: 200px;
    height: 160px;
    overflow: hidden;
}

.logo-box-ad2 {
    background: #FFFFFF;
    padding: 76px 0 100px 0;
}

.logo-box-ad2 .container {
    display: flex;
}

.logo-box-ad2 .left {
    width: 390px;
    height: 290px;
    position: relative;
    margin-right: 178px;
    margin-left: 76px;
}

.logo-box-ad2 .edit-icons {
    position: absolute;
    left: 63px;
    top: -35px;
}

.logo-box-ad2 .pagination {
    position: absolute;
    right: -30px;
    top: 30px;
}

.logo-box-ad2 .right {

}

.logo-box-ad2 .right h2 {
    font-size: 36px;
    padding-bottom: 27px;
}

.logo-box-ad2 .right .desc {
    color: #888888;
    font-size: 16px;
    font-weight: lighter;
    padding-bottom: 39px;
    line-height: 25px;
}

.logo-box-download {
    padding: 100px 0;
}

.logo-box-download .container {
    display: flex;
}

.logo-box-download .left {
    width: 589px;
    margin-right: 289px;
}

.logo-box-download .left h2 {
    font-size: 36px;
    margin-bottom: 26px;
}

.logo-box-download .left .tips {
    font-size: 16px;
    line-height: 26px;
    color: #888888;
    padding: 16px 0;
}

.logo-box-download .left ul {
    padding-bottom: 29px;
}

.logo-box-download .left li {
    display: block;
    height: 20px;
    line-height: 20px;
    background: url("../images/ok.svg") left center no-repeat;
    padding: 0 0 0 30px;
    margin-bottom: 23px;
    color: #5E5E5E;
    font-size: 14px;
    font-weight: lighter;
}

.logo-box-download .right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.logo-box-download .right .image-format-item {
    margin-right: 16px;
}

.logo-box-download .image-format-item1 {
    width: 198px;
    height: 156px;
    overflow: hidden;
}

.logo-box-download .image-format-item1 img {
    transition: all .5s;
}

.logo-box-download .image-format-item1 img:hover {
    transform: scale(1.2);
}

.logo-box-download .right img {
    display: block;
}

.logo-box-case {
    background: #FFFFFF;
    padding-bottom: 81px;
    padding-top: 50px;
}

.logo-box-case .title {
    text-align: center;
    font-size: 38px;
    padding-bottom: 23px;
}

.logo-box-case .tips {
    font-size: 16px;
    color: #888888;
    padding-bottom: 70px;
    text-align: center;
}

.logo-box-case ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 21px;
}

.logo-box-case li {
    width: 284px;
    height: 228px;
    overflow: hidden;
    box-shadow: 0 1px 19px 2px rgb(0 0 0/10%);
    background: url("../images/loading.gif") center no-repeat;
    position: relative;
    z-index: 10;
}
.logo-box-case li .mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: rgba(0,0,0,.2);
}
.logo-box-case li img.cover {
    width: 100%;
    height: 100%;
    display: block;
    transition: all .5s;
}
.logo-box-case li .edit-btn{
    width: 120px;
    height: 40px;
    border-radius: 5px;
    background: #FFFFFF;
    color: #f64a22;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: none;
    z-index: 10;
}
.logo-box-case li  .edit-btn img{
    display: block;
    margin-right: 10px;
}
.logo-box-case li:hover .mask{
    display: block;
}
.logo-box-case li:hover .edit-btn{
    display: flex;
}
.logo-box-case li img.cover:hover {
    transform: scale(1.2);
}

.logo-box-case .create-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 49px auto 0;
}

.logo-box-case .create-btn img {
    display: block;
    margin-left: 5px;
}

.case-search-box {
    height: 82px;
    line-height: 82px;
    background: #FFFFFF;
    border-radius: 5px;
    font-size: 18px;
    color: #666666;
    padding: 0 20px;
    display: flex;
    align-items: center;
    margin-bottom: 44px;
}

.case-search-box input {
    display: block;
    height: 50px;
    background: #F7F7F7;
    border-radius: 5px;
    margin: 0 20px;
    border: none;
    padding: 0 18px;
    flex: 1;
}

.case-search-box .btn {
    display: block;
    width: 64px;
    height: 50px;
    background: #F64A22;
    border-radius: 5px;
    text-align: center;
    line-height: 50px;
    color: #FFFFFF;
    transition: background-color .5s;
}

.case-search-box .btn:hover {
    background: #f9795c;
    color: #FFFFFF;
}

.case-container {

}

.case-container .case-category {
    height: 32px;
    line-height: 32px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 31px;
    overflow: hidden;
}

.case-container .case-category a {
    display: block;
    padding: 0 10px;
    height: 32px;
    line-height: 28px;
    background: #F7F7F7;
    border: 2px solid #5E5E5E;
    border-radius: 15px;
    text-align: center;
    margin-right: 16px;
    transition: background-color .5s;
}

.case-container .case-category a:hover {
    background: #5E5E5E;
    color: #FFFFFF;
}

.case-container .case-category a.active {
    background: #5E5E5E;
    color: #FFFFFF;
}

.case-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 18px;
    margin-bottom: 30px;
}

.case-list .case-list-item {
    width: 285px;
    height: 299px;
    background: #FFFFFF;
    position: relative;
    padding: 20px;
    border-radius: 5px;
}

.case-list .case-list-item:hover {
    box-shadow: 0 1px 19px 2px rgb(0 0 0/10%);
}

.case-list .case-list-item .bookmark {
    position: absolute;
    top: 20px;
    right: 20px;
}

.case-list .case-list-item .bookmark svg path {
    fill: #9ea7b3;
}

.case-list .case-list-item .bookmark:hover svg path {
    fill: #F64A22;
}

.case-list .case-list-item .active svg path {
    fill: #F64A22;
}

.case-list .case-list-item .image {
    width: 194px;
    height: 194px;
    margin: 0 auto;
    background: url("../images/loading.gif") center no-repeat;
}

.case-list .case-list-item:hover {

}

.case-list .case-list-item img {
    display: block;
    border: none;
}

.case-list .active img {
    display: block;
}

.case-list .case-list-item .title {
    color: #5E5E5E;
    font-weight: lighter;
    font-size: 16px;
    padding: 10px 0 8px 0;
	text-align: center;
}

.case-list .case-list-item .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999999;
    font-size: 14px;
}

.case-list .case-list-item .meta .icon {
    display: flex;
    align-items: center;
}

.case-list .case-list-item .meta .icon svg:hover path {
    fill: #999999;
}

.case-list .case-list-item .meta .icon svg {
    margin-right: 5px;
}

.industry-box {
    background: #FFFFFF;
}


.inner-header {
    padding: 0 20px;
    height: 70px;
    background: #000000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.inner-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.inner-header .logo {
    margin-right: 15px;
}

.inner-header .logo img {
    width: 120px;
}

.inner-header .back {
    height: 25px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 14px;
}

.inner-header .back img {
    width: 20px;
    height: 20px;
    display: block;
    margin-right: 15px;
}

.inner-header .btn-actions {
    display: flex;
    flex-direction: row;
}

.inner-header .btn-save {
    display: block;
    width: 90px;
    height: 32px;
    border: 2px solid #FFFFFF;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
    margin-right: 20px;
}

.inner-header .btn-download {
    display: block;
    width: 64px;
    height: 30px;
    background: #F64A22;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
    transition: background-color .5s;
}

.inner-header .btn-download:hover {
    background: #f9795c;
}

.stage-container {
    display: flex;
}
.svg-box{
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.main-stage-container {
    flex: 1;
}

.main-stage-container img {
    display: block;
    margin-right: 5px;
    width: 18px;
    height: 18px;
}

.main-stage-container .tool-box-container {
    height: 50px;
    background: #FFFFFF;
    display: flex;
    padding: 0 20px;
    justify-content: space-between;
}

.main-stage-container .tool-box-container .tool-box-left {
    flex: 1;
}

.main-stage-container .tool-box-container .tool-box {
    display: flex;
    flex-direction: row;
}

.main-stage-container .tool-box-container .tool-box-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
}

.main-stage-container .tool-box-container .tool-box-btn svg {
    margin-right: 5px;
}

.main-stage-container .tool-box-container .disabled {
    color: #acacac;
}

.main-stage-container .tool-box-container .disabled svg path {
    fill: #acacac;
}

.main-stage-inner {
    height: calc(100vh - 225px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-stage-inner .main-stage {
    width: 600px;
    height: 480px;
    background: url("../images/stage.png") center no-repeat #FFFFFF;
    position: relative;
}

.main-stage-inner .main-stage-loading {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.main-stage-inner .main-stage-loading .loading-icon {
    width: 30px;
    height: 30px;
    background: url("../images/main-loading.svg") center no-repeat;
    animation: rotation 1s infinite;
    animation-timing-function: linear;
}

.main-stage-inner .main-stage .context-menu {
    left: 0;
    top: 0;
    width: 190px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
    background-color: #fff;
    position: absolute;
    z-index: 1;
    font-size: 14px;
    display: none;
}

.main-stage-inner .main-stage .disabled a {
    color: #afafaf;
}

.main-stage-inner .main-stage .disabled svg path {
    fill: #afafaf;
}

.main-stage-inner .main-stage .context-menu .context-menu-item {
    display: flex;
    height: 48px;
    align-items: center;
    padding: 0 10px;
}

.main-stage-inner .main-stage .context-menu .context-menu-item svg {
    margin-right: 10px;
}

.main-stage-inner .main-stage .context-menu .context-menu-item:hover {
    background: #f2f3f5;
}

.main-stage-container .bottom-bar {
    height: 75px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px solid #DEDEDE;
}

.main-stage-container .bottom-bar .btn-progress {
    display: block;
    width: 110px;
    height: 44px;
    background: #FFFFFF;
    border: 2px solid #595959;
    border-radius: 5px;
    margin-right: 18px;
    text-align: center;
    line-height: 40px;
}

.main-stage-container .bottom-bar .btn-download {
    display: block;
    width: 84px;
    height: 42px;
    background: #F64A22;
    border-radius: 5px;
    line-height: 42px;
    text-align: center;
    color: #FFFFFF;
}
.main-stage-container .bottom-bar .btn-save{
    display: block;
    width: 104px;
    height: 42px;
    border-radius: 5px;
    line-height: 42px;
    text-align: center;
    margin-right: 18px;
    background-color: rgb(244,244,244);
}

.panel-container {
    width: 506px;
    display: flex;
    flex-direction: row;
}

.panel-container .panel-tabs {
    width: 86px;
    background: #FFFFFF;
    border: 2px solid #DEDEDE;
    border-top: none;
    flex-shrink: 0;
}

.panel-container .panel-tabs a {
    display: flex;
    flex: 0;
    height: 82px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #DEDEDE;
}

.panel-container .panel-tabs a.active {
    background: #EFEFEF;
}

.panel-content {
    padding: 0 28px;
    display: none;
}

.panel-content .title {
    font-size: 20px;
    font-weight: bold;
    padding: 34px 0 22px 0;
    display: flex;
    justify-content: space-between;
}

.panel-content .title .btn {
    font-size: 14px;
    font-weight: normal;
}

.panel-text textarea {
    box-sizing: border-box;
    display: block;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    padding: 14px;
    margin-bottom: 15px;
    width: 100%;
}

.panel-text .font-selector {
    box-sizing: border-box;
    display: block;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    margin-bottom: 15px;
    position: relative;
}
.panel-text .font-selector .font-text{
    box-sizing: border-box;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
}
.font-selector .font-selector-items{
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0;
    height: 320px;
    overflow-y: scroll;
    display: none;
}
.font-selector-item{
    display: flex;
    box-sizing: border-box;
    background: #FFFFFF;
    height: 40px;
    padding: 0 15px;
    justify-content: space-between;
    align-items: center;
}
.font-selector-item .loading{
    display: none;
}
.font-selector-item:hover{
    background: #f5f5f5;
}

.panel-text .size-changer {
    display: flex;
    flex-direction: row;
}

.panel-text .size-changer .btn {
    width: 51px;
    height: 51px;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.panel-text .size-changer input {
    display: block;
    width: 81px;
    height: 51px;
    background: #EFEFEF;
    border: 1px solid #DEDEDE;
    text-align: center;
}

.panel-container .color-picker {
    margin-top: 16px;
}

.panel-container .color-picker .hd {
    font-size: 18px;
    color: #595959;
    margin-bottom: 16px;
}

.panel-container .color-picker .bd {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.panel-container .color-picker .color-picker-item {
    width: 46px;
    height: 46px;
    border-radius: 2px;
    margin: 0 12px 12px 0;
    cursor: pointer;
}
.panel-container .color-picker .color-picker-btn{
    width: 46px;
    height: 46px;
    margin: 0 12px 12px 0;
    cursor: pointer;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topic-header-container {
    height: 530px;
    background: url("../images/hbg.png") #000000 center no-repeat;
    background-size: cover;
}

.topic-header-container .create-box {
    margin: 165px auto 0 auto;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.topic-header-container .create-box .title {
    font-size: 48px;
    margin-bottom: 27px;
    text-align: center;
}

.topic-header-container .create-box .tips {
    font-size: 16px;
    text-align: center;
    margin-bottom: 40px;
}

.topic-header-container .input-container {
    width: 450px;
    height: 70px;
    background: #FFFFFF;
    border-radius: 5px;
    position: relative;
    margin-bottom: 40px;
}

.topic-header-container .input {
    display: flex;
    border: none;
    flex-direction: row;
    align-items: center;
}

.topic-header-container input {
    display: block;
    border: none;
    width: 265px;
    height: 70px;
    line-height: 70px;
    padding-left: 18px;
    color: #999999;
    font-size: 16px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.topic-header-container .btn {
    width: 180px;
    height: 60px;
    background: #F64A22;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
}

.topic-header-container .btn:hover {
    background: #f9795c;
}


.topic-header-container .cs {
    color: #FFFFFF;
    width: 200px;
    font-size: 18px;
    position: absolute;
    right: -240px;
    top: 22px;
    display: block;
    background: url("../images/arrow-right.png") 159px center no-repeat;
}

.topic-header-container .num-show {
    text-align: center;
    color: #A2A2A2;
    font-size: 14px;
}

.logo-box {

}

.logo-box .hd {
    color: #000000;
    font-size: 24px;
    padding: 23px 0 48px 0;
}

.logo-box .bd {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    margin-bottom: 30px;
}

.logo-box .bd li {
    width: 284px;
    height: 226px;
    background: url("../images/loading.gif") #FFFFFF center no-repeat;
    border-radius: 5px;
}

.logo-box .bd li img {
    display: block;
    width: 100%;
    max-width: 284px;
    border-radius: 5px;
}

.logo-box .pagination {

}

.topic-show-box {
    margin-top: 50px;
    padding: 110px 0 69px 0;
    background: #FFFFFF;
}

.topic-show-box .container {
    display: flex;
    flex-direction: row;
}

.topic-show-box1 .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.topic-show-box1 .left {
    width: 478px;
    position: relative;
}

.topic-show-box .left img {
    position: absolute;
    left: -52px;
    top: -45px;
}

.topic-show-box .title {
    font-size: 40px;
    line-height: 60px;
    margin-bottom: 50px;
    margin-top: -20px;
}

.topic-show-box1 .right {
    width: 406px;
}

.topic-show-box1 .right .text-box {
    margin-bottom: 52px;
    padding-right: 23px;
}

.topic-show-box1 .right .text-box .hd {
    font-size: 20px;
    color: #101010;
    margin-bottom: 18px;
}

.topic-show-box1 .right .text-box .bd {
    line-height: 30px;
    color: #999999;
}

.topic-show-box1 .right .cm {
    margin-top: 10px;
}

.topic-show-box1 .right .cm a {
    color: #F2530F;
}

.topic-show-box2 {
    padding: 100px 0;
}

.topic-show-box2 .container {
    display: flex;
    flex-direction: column;
}

.topic-show-box2 .title {
    width: 637px;
    height: 100px;
    font-size: 44px;
    line-height: 60px;
    margin-bottom: 80px;
}

.topic-show-box2 .box-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 106px;
    grid-row-gap: 60px;
}

.topic-show-box2 .desc-box {
    box-sizing: border-box;
    width: 330px;
    height: 162px;
    background: #F7F7F7;
    box-shadow: 0 1px 7px 0 rgba(242, 83, 15, 0.2000);
    padding: 21px;
}

.topic-show-box2 .desc-box .hd {
    font-size: 20px;
    color: #000000;
    margin-bottom: 18px;
}

.topic-show-box2 .desc-box .hd span {
    color: #F2530F;
    margin-right: 5px;
}

.topic-show-box2 .desc-box .bd {
    line-height: 24px;
    color: #666666;
}

.topic-show-box2 .create-btn {
    margin: 60px auto 0 auto;
}

.topic-show-box3 .container {

}

.topic-show-box3 .left {
    width: 461px;
    margin-right: 271px;
    flex-shrink: 0;
    position: relative;
}

.topic-show-box3 .right {
    display: grid;
    grid-row-gap: 40px;
    grid-column-gap: 80px;
    grid-template-columns: repeat(2, 1fr);
}

.topic-show-box3 .box-words {
}

.topic-show-box3 .box-words dt {
    font-size: 16px;
    color: #000000;
    margin-bottom: 15px;
}

.topic-show-box3 .box-words dd {
    font-size: 14px;
    display: flex;
    margin-bottom: 15px;
}

.topic-show-box3 .box-words dd a {
    color: #666666;
}

.topic-word-box {
    background: #f7f7f7;
}

.topic-word-box .words-list .bd a {
    background-color: #EEEEEE;
}

.topic-show-box4 {
    background: #FFFFFF;
}

.topic-show-box4 .container {
    padding: 100px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.topic-show-box4 .left {
    width: 500px;
    position: relative;
}

.topic-show-box4 .left img {
    position: absolute;
    left: -48px;
    top: -22px;
}

.topic-show-box4 .left .hd {
    font-size: 36px;
    line-height: 60px;
    margin-bottom: 37px;
}

.topic-show-box4 .left .bd {
    font-size: 16px;
    color: #999999;
    line-height: 30px;
}

.topic-show-box4 .left .tips {
    padding: 20px 0;
}

.topic-show-box4 .right {
    padding-top: 17px;
    width: 500px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.topic-show-box4 .right li {
    box-sizing: border-box;
    border: 1px solid #dadada;
}

.topic-show-box5 {
    padding: 100px 0 70px 0;
}

.topic-show-box5 .up {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 62px;
}

.topic-show-box5 .up .left {
    width: 498px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 18px;
}

.topic-show-box5 .up .left li {
    border: 1px solid #dadada;
    width: 240px;
    height: 176px;
}

.topic-show-box5 .up .right {
    width: 500px;
    position: relative;
    top: -20px;
}

.topic-show-box5 .up .right .hd {
    font-size: 36px;
    line-height: 60px;
    margin-bottom: 30px;
}

.topic-show-box5 .up .right .bd {
    font-size: 16px;
    color: #999999;
}

.topic-show-box5 .item-box-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.topic-show-box5 .item-box-container .item-box {
    width: 366px;
}

.topic-show-box5 .item-box-container .item-box img {
    display: block;
    margin-bottom: 25px;
}

.topic-show-box5 .item-box-container .item-box .title {
    font-size: 24px;
    margin-bottom: 18px;
}

.topic-show-box5 .item-box-container .item-box .bd {
    font-size: 16px;
    line-height: 30px;
    color: #999999;
}

.topic-show-qa {
    padding: 100px 0;
    background: #FFFFFF;
}

.topic-show-qa .title {
    font-size: 36px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 60px;
    display: flex;
    justify-content: center;
}

.topic-show-qa .title .title-container {
    position: relative;
}

.topic-show-qa .title img {
    position: absolute;
    left: -40px;
    top: -50%;
}

.topic-show-qa .tips {
    font-size: 14px;
    color: #666666;
    margin-bottom: 67px;
    text-align: center;
}

.topic-show-qa .qa-box-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.topic-show-qa .qa-box-container .qa-box {
    width: 571px;
    margin-bottom: 39px;
}

.topic-show-qa .qa-box-container .qa-box .hd {
    font-size: 20px;
    margin-bottom: 20px;
}

.topic-show-qa .qa-box-container .qa-box .bd {
    color: #999999;
    font-size: 16px;
    line-height: 30px;
}

.topic-show-box6 {
    box-sizing: border-box;
    height: 270px;
    color: #FFFFFF;
    background: #F64A22;
    padding-top: 81px;
}

.topic-show-box6 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.topic-show-box6 .title {
    font-size: 44px;
    margin-bottom: 31px;
}

.topic-show-box6 .tips {
    margin-bottom: 51px;
    font-size: 16px;
}

.topic-show-box6 .btn {
    display: block;
    width: 231px;
    height: 54px;
    background: #FFFFFF;
    border-radius: 5px;
    color: #F2530F;
    text-align: center;
    line-height: 54px;
    font-size: 18px;
}

.case {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.case .left {
    width: 860px;
}

.case .left .preview-box {
    background: #FFFFFF;
    padding: 29px;
    box-sizing: border-box;
}

.case .left .hd-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.case .left .hd {
    font-size: 24px;
    margin-bottom: 20px;
}

.case .left .works-info {
    color: #999999;
    font-size: 14px;
    display: flex;
    flex-direction: row;
}

.case .left .works-info a.author {
    padding: 0 8px;
    display: flex;
    align-items: center;
    height: 22px;
    background: #FFE2D5;
    border-radius: 2px;
    color: #F2530F;
    line-height: 22px;
    margin-right: 14px;
}

.case .left .works-info a img {
    margin-left: 3px;
}

.case .left .hits {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.case .left .hits .icon {
    width: 60px;
    height: 60px;
    background: url("../images/hot.svg") center no-repeat;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
}

.case .left .view-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.case .left .view-box .btn {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.case .left .view-box .btn-left {
    background: url("../images/d-left.png");
}

.case .left .view-box .btn-right {
    background: url("../images/d-right.png");
}

.case .left .view-box .preview {
    width: 478px;
    margin: 0 auto 18px auto;
    background: url("../images/loading.gif") center no-repeat;
    overflow: hidden;
}

.case .left .view-box .preview img {
    display: block;
    margin: 0 auto;
    background-color: #FFFFFF;
}

.case .left .view-box .preview p {
    text-align: center;
    margin-bottom: 30px;
    color: #595959;
}

.case .left .works-des {
    background: #F7F7F7;
    text-align: left;
    padding: 24px;
    color: #666666;
    line-height: 28px;
    border-radius: 5px;
}

.case .left .works-des p {
    text-indent: 2em;
}

.case .left .works-des h3 {
    font-weight: bold;
}

.case .left .tips {
    padding: 18px 30px;
    background: #FFF3F0;
    border-radius: 5px;
    font-size: 14px;
    color: #999999;
    line-height: 24px;
    margin: 11px 0 51px 0;
}

.case .left .tips a {
    color: #F64A22;
}

.logo-create-box {
    padding: 62px;
    background: #FFFFFF;
    box-shadow: 0 1px 19px 2px rgba(246, 74, 34, 0.1100);
    border-radius: 5px;
    margin-bottom: 50px;
}

.logo-create-box h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    height: 35px;
    line-height: 35px;
    margin-bottom: 33px;
}

.logo-create-box h2 img {
    margin-right: 7px;
}

.logo-create-box .input {
    width: 735px;
    height: 80px;
    background: #F7F7F7;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo-create-box .input input {
    flex: 1;
    display: block;
    height: 70px;
    border: none;
    padding: 0 24px;
    background: #F7F7F7;
    font-size: 20px;
    color: #333;
}

.logo-create-box .input .btn {
    display: block;
    width: 160px;
    height: 70px;
    background: #F64A22;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    line-height: 70px;
    font-size: 20px;
    transition: background-color .5s;
}

.logo-create-box .input .btn:hover {
    background: #f9795c;
    color: #FFFFFF;
}

.case .left .item-box {
    margin: 0 0 50px 0;
}

.case .left .item-box .title {
    font-size: 24px;
    color: #0F0F0E;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    height: 28px;
    line-height: 28px;
    align-items: center;
}

.case .left .item-box .title .title-bg {
    width: 6px;
    height: 23px;
    background: #F2530F;
    border-radius: 3px;
    margin-right: 10px;
}

.case .left .item-box .title h3 {
    flex: 1;
}

.case .left .item-box .title .more {
    font-size: 14px;
    color: #999999;
}

.case .left .item-box ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.case .left .item-box li {
    width: 200px;
    height: 239px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
}

.case .left .item-box li:hover {
    box-shadow: 0 1px 19px 2px rgb(0 0 0/10%);
}

.case .left .item-box li .logo {
    position: relative;
    width: 158px;
    height: 158px;
    background: url("../images/loading.gif") center no-repeat;
}

.case .left .item-box li .logo img {
    display: block;
    width: 158px;
    height: 158px;
}

.case .left .item-box li .bookmark {
    position: absolute;
    right: 0;
    top: 0;
}

.case .left .item-box li .bookmark svg g {
    fill: #9ea7b3;
}

.case .left .item-box li .bookmark:hover svg g {
    fill: #f64a22;
}

.case .left .item-box li .active svg g {
    fill: #f64a22;
}

.case .left .item-box li .logo-title {
    margin: 5px 0 5px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.case .left .item-box li .logo-title a {
    color: #5E5E5E;
    font-size: 14px;
}

.case .left .item-box li .logo-meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 12px;
    color: #999999;
}

.case .left .item-box li .logo-meta .date {
    background: url("../images/icon-clock.png") left center no-repeat;
    padding-left: 18px;
}

.case .left .item-box li .logo-meta .num-hit {
    background: url("../images/icon-eye.png") left center no-repeat;
    padding-left: 20px;
}

.case .right {
    width: 310px;
}

.case .right .create-box {
    color: #FFFFFF;
    background: #F2530F;
    border-radius: 5px;
    padding: 35px 42px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 30px;
}

.case .right .create-box .hd {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #FFFFFF;
}

.case .right .create-box .btn {
    display: block;
    width: 227px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 5px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    color: #F2530F;
}

.case .right .keywords-box {
    background: #FFFFFF;
    padding: 30px;
    margin-bottom: 30px;
}

.case .right .keywords-box .hd {
    font-size: 20px;
    margin-bottom: 15px;
}

.case .right .keywords-box .bd {
    display: flex;
    flex-wrap: wrap;
}

.case .right .keywords-box .bd a {
    flex: 0 0 33.33%;
    font-size: 16px;
    color: #999999;
    margin-bottom: 10px;
}

.case .right .keywords-box .bd a:hover {
    color: #F64A22;
}

.cs-box {
    display: flex;
    flex-direction: row;
    margin-top: 67px;
    justify-content: space-between;
}

.cs-box .left {
    color: #FFFFFF;
}

.cs-box .left h1 {
    font-size: 48px;
    line-height: 48px;
    font-weight: bold;
    margin-bottom: 22px;
}

.cs-box .left .tips {
    font-size: 24px;
    color: #D0D0D0;
    margin-bottom: 29px;
}

.cs-box .left .qr-container {
    box-sizing: border-box;
    width: 170px;
    height: 200px;
    background: #2b2b2b;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: #7A7979;
    font-size: 12px;
    flex-direction: column;
}

.cs-box .left .qr-container .words {
    padding: 8px 0;
}

.cs-box .left .qr-container img {
    display: block;
    border-radius: 5px;

}

.cs-box .right {
    width: 457px;
    height: 456px;
    position: relative;
}

.cs-box .right .image-item {
    background: url("../images/loading.gif") #FFFFFF center no-repeat;
    border-radius: 5px;
}

.cs-box .right .image-item img {
    display: block;
    border-radius: 5px;
    transition: all .5s;
}

.cs-box .right .image-item img:hover {
    transform: scale(1.2);
}


.cs-box .right .image-item1 {
    position: absolute;
    top: 26px;
    left: 0;
    width: 180px;
    height: 180px;
    overflow: hidden;
}

.cs-box .right .image-item2 {
    position: absolute;
    top: 0;
    left: 203px;
    width: 254px;
    height: 254px;
    overflow: hidden;
}

.cs-box .right .image-item3 {
    position: absolute;
    top: 275px;
    left: 80px;
    width: 306px;
    height: 180px;
    overflow: hidden;
}

.customize-list {
    padding: 89px 0 52px 0;
}

.customize-list .title {
    text-align: center;
    font-size: 38px;
    color: #000000;
    margin-bottom: 19px;
}

.customize-list .tips {
    font-size: 16px;
    color: #999999;
    text-align: center;
    margin-bottom: 50px;
}

.customize-list ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 21px;
}

.customize-list li {
    width: 284px;
    height: 226px;
    background: url("../images/loading.gif") #FFFFFF center no-repeat;
    border-radius: 5px;
    overflow: hidden;
}

.customize-list li:hover {
    box-shadow: 0 1px 19px 2px rgb(0 0 0/10%);
}

.customize-list li img {
    border-radius: 5px;
}

.customize-list li img:hover {
}

.design-concept {
    background: #000000;
    padding: 78px 0 91px 0;
}

.design-concept .container {

}

.design-concept .hd {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFFFFF;
    margin-bottom: 60px;
}

.design-concept .hd .title {
    font-size: 38px;
    margin-bottom: 40px;
    position: relative;
}

.design-concept .hd .title img {
    display: block;
    position: absolute;
    left: -40px;
    top: -45px;
}

.design-concept .hd .sub-title {
    border-top: 1px solid #FFFFFF;
    width: 200px;
    box-sizing: border-box;
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 24px;
    color: #8A8A8A;
}

.design-concept .hd .tips {
    letter-spacing: 5px;
}

.design-concept .hd .tips span {
    color: #F2530F;
}

.design-concept .bd {
    width: 384px;
    margin: 0 auto 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    color: #FFFFFF;
}

.design-concept .design-concept-item {
    width: 182px;
    height: 182px;
    position: relative;
}

.design-concept .design-concept-item .text {
    width: 120px;
    height: 96px;
    position: absolute;
    top: 50%;
    margin-top: -48px;
}

.design-concept .design-concept-item .title {
    color: #F2530F;
    font-size: 30px;
    margin-bottom: 20px;
}

.design-concept .design-concept-item .tips {
    font-size: 18px;
}

.design-concept .design-concept-item1 {
    background: url("../images/concept-item1.png") center no-repeat;
}

.design-concept .design-concept-item1 .text {
    left: -144px;
}

.design-concept .design-concept-item2 {
    background: url("../images/concept-item2.png") center no-repeat;
}

.design-concept .design-concept-item2 .text {
    right: -144px;
}

.design-concept .design-concept-item3 {
    background: url("../images/concept-item3.png") center no-repeat;
}

.design-concept .design-concept-item3 .text {
    left: -144px;
}

.design-concept .design-concept-item4 {
    background: url("../images/concept-item4.png") center no-repeat;
}

.design-concept .design-concept-item4 .text {
    right: -144px;
}

.design-history-container {
    margin: 0 auto 38px auto;
    width: 90%;
    height: 306px;
    background: #FFFFFF;
    box-shadow: 2px 2px 8px 0 rgba(242, 83, 15, 0.2500);
}

.design-history-container .design-history {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    padding: 92px 0;
    background: url("../images/bg_num.png") bottom center no-repeat;
}

.design-history-container .design-history .design-history-item {
    flex: 1;
    background: url("../images/bg_line.png") right center no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #F2530F;
}

.design-history .design-history-item:last-child {
    background: none;
}

.design-history .design-history-item .title {
    font-size: 32px;
    line-height: 48px;
}

.design-history .design-history-item .des {
    font-size: 30px;
    margin: 10px 0;
}

.design-history .design-history-item .title span {
    font-size: 48px;
}

.design-history .design-history-item .sub-title {
    font-size: 12px;
}

.white-box {
    background: #FFFFFF;
    padding-top: 38px;
}

.hexagon-container {
    padding: 83px 0 0 0;
}

.hexagon-container .title {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    position: relative;
    line-height: 36px;
    width: 470px;
    margin: 0 auto;
    padding-bottom: 49px;
}

.hexagon-container .title img {
    position: absolute;
    left: -40px;
    top: -30px;
}

.hexagons {
    width: 1200px;
    height: 850px;
    position: relative;
    margin: 0 auto;
}

.hexagons .bg-dot-upper {
    position: absolute;
    left: -108px;
    top: -100px;
}

.hexagons .bg-dot-down {
    position: absolute;
    right: -133px;
    bottom: 60px;
    transform: rotate(180deg);
}

.hexagons-items {
    height: 700px;
    width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 300px);
    grid-template-rows: repeat(2, 260px);
    grid-row-gap: 30px;
    position: relative;
}

.hexagons .hexagons-item {
    width: 300px;
    height: 260px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F2530F;
    clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
}

.hexagons-item-image {
    background: #FFFFFF !important;
}

.hexagons .hexagons-item .text {
    color: #FFFFFF;
    width: 120px;
    height: 158px;
    z-index: 999;
}

.hexagons .hexagons-item .text .hd {
    font-size: 30px;
    color: #FAFAFA;
    line-height: 36px;
    margin-bottom: 25px;
}

.hexagons .hexagons-item .text .bd {
    text-transform: uppercase;
}

.hexagons .hexagons-item img {
    display: block;
}

.hexagons .hexagons-item1 {

}

.hexagons .hexagons-item2 {
    position: relative;
    top: 435px;
}

.hexagons .hexagons-item6 {
    position: relative;
    top: -145px;
}

.bg-time {
    height: 306px;
    background: url("../images/bg_time.png") center no-repeat;
    background-size: cover;
}

.bg-time img {
    display: block;
}

.design-power {
    padding: 0 0 71px 0;
}

.design-power .title {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    width: 231px;
    margin: 0 auto 17px auto;
    height: 90px;
    line-height: 90px;
    border-bottom: 1px solid #E5E5E5;
}

.design-power .tips {
    text-align: center;
    font-size: 24px;
    color: #999999;
    margin-bottom: 61px;
}

.design-power .design-power-box {
    display: flex;
}

.design-power .design-power-item {
    flex: 1;
    height: 165px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.design-power .design-power-item img {
    display: block;
    margin-bottom: 20px;
}

.design-power .design-power-item .hd {
    font-size: 24px;
    margin-bottom: 13px;
}

.design-power .design-power-item .bd {
    font-size: 16px;
    color: #999999;
    width: 240px;
    text-align: center;
    line-height: 22px;
}

.article-list {

}

.article-list .list-item {
    padding: 20px;
    background: #FFFFFF;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

.article-list .list-item .cover {
    width: 360px;
    height: 200px;
    flex-shrink: 0;
    overflow: hidden;
    margin-right: 22px;
    background: url("../images/loading.gif") center no-repeat;
}

.article-list .list-item .cover a {
    display: block;
}

.article-list .list-item .cover img {
    display: block;
}

.article-list .list-item .title {
    font-size: 24px;
}

.article-list .list-item .meta {
    padding: 15px 0;
    color: #999999;
    display: flex;
    align-items: center;
}

.article-list .list-item .meta .separator {
    padding: 0 10px;
}

.article-list .list-item .meta a {
    color: #999999;
}

.article-list .list-item .abstract {
    color: #999999;
    line-height: 26px;
}

.article-view .container {
    display: flex;
    justify-content: space-between;
}

.article-view .left {
    width: 860px;
    overflow: hidden;
    flex-shrink: 0;
}

.article-view .left .article-box {
    background: #FFFFFF;
    padding: 31px;
}

.article-view .left .article-box h1 {
    font-size: 36px;
    color: #2F3235;
    line-height: 48px;
    margin-bottom: 18px;
}

.article-view .left .article-box .meta {
    color: #999999;
    margin-bottom: 26px;
}

.article-view .left .article-box .meta .separator {
    margin: 0 15px;
}

.article-view .left .article-box .content {
    line-height: 30px;
}

.article-view .left .article-box .content img {
    display: block;
    width: 90%;
    margin: 20px auto;
}

.article-view .left .tips {
    margin-top: 11px;
    background: #FFF3F0;
    border-radius: 5px;
    padding: 18px 30px;
    color: #999999;
}

.article-view .left .tips a {
    color: #F2530F;
}

.article-view .left .links {
    display: flex;
    flex-direction: column;
    padding: 30px 0;
}

.article-view .left .links a {
    color: #999999;
}

.article-view .left .links .links-item:nth-child(1) {
    margin-bottom: 20px;
}

.article-view .left .relative-article-box {
    background: #FFFFFF;
    padding: 0 30px;
    margin-bottom: 30px;
}

.article-view .left .relative-article-box .hd {
    padding: 20px 0 20px 0;
    font-size: 24px;
    color: #333333;
}

.article-view .left .relative-article-box .list-item {
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.article-view .left .relative-article-box .list-item .main {
    width: 516px;
}

.article-view .left .relative-article-box .list-item .cover {
    width: 244px;
    height: 136px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 20px;
}

.article-view .left .relative-article-box .list-item .cover img {
    display: block;
}

.article-view .left .relative-article-box .list-item a {
    color: #2F3235;
}

.article-view .left .relative-article-box .list-item .title {
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 26px;
}

.article-view .left .relative-article-box .list-item .meta {
    color: #999999;
    padding: 10px 0 10px 0;
    display: flex;
    align-items: center;
}

.article-view .left .relative-article-box .list-item .meta a {
    color: #999999;
}

.article-view .left .relative-article-box .list-item .meta .separator {
    padding: 0 5px;
}

.article-view .left .relative-article-box .list-item .abstract {
    color: #999999;
    line-height: 24px;
}

.article-view .right {
    width: 310px;
    overflow: hidden;
}

.article-view .right .create-box {
    color: #FFFFFF;
    background: #F2530F;
    border-radius: 5px;
    padding: 35px 42px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 30px;
}

.article-view .right .create-box .hd {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

.article-view .right .create-box .btn {
    display: block;
    width: 227px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 5px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    color: #F2530F;
}

.right .box-side {
    background: #FFFFFF;
    padding: 10px 30px;
    margin-bottom: 20px;
    color: #999999;
}

.right .box-side .hd {
    font-size: 20px;
    height: 28px;
    line-height: 28px;
    margin-bottom: 15px;
}

.right .box-side a {
    color: #2F3235;
}

.right .box-side .box-new-item {
    margin-bottom: 10px;
}

.right .box-side .box-new-item .title {
    margin-bottom: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.right .box-side .bd {

}

.right .box-side .box-hot-item {
    display: flex;
    padding-bottom: 10px;
}

.right .box-side .box-hot-item .title {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.right .box-side .box-hot-item .cover {
    width: 127px;
    height: 74px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #dadada;
    box-sizing: border-box;
    margin-right: 10px;
    padding: 3px;
}

.article-view .right .box-logo-last {

}

.article-view .box-last-item {
    display: flex;
    margin-bottom: 27px;
}

.article-view .box-last-item .cover {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 12px;
}

.article-view .box-last-item .main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tm-show-box1 {
    box-sizing: border-box;
    background: #F64A22;
    color: #FFFFFF;
    padding: 63px 0 0 0;
    height: 764px;
    margin-bottom: 130px;
}

.tm-show-box1 .title {
    width: 420px;
    font-size: 38px;
    margin: 0 auto 30px auto;
}

.tm-show-box1 .tips {
    font-size: 16px;
    text-align: center;
    margin-bottom: 112px;
}

.tm-show-box1 .tm-process {
    display: flex;
    width: 1120px;
    flex-shrink: 0;
    justify-content: space-between;
    margin: 0 auto 100px auto;
}

.tm-show-box1 .tm-process .tm-process-item {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.tm-show-box1 .tm-process .tm-process-item .text {
    text-align: center;
    flex: 1;
}

.tm-show-box1 .tm-process .tm-process-item .text img {
    display: block;
    margin: 0 auto 29px auto;
    flex: 1;
}

.tm-show-box1 .tm-process .tm-process-item .progress-arrow {
    position: relative;
    top: 20px;
}

.tm-show-box1 .service-box {
    position: relative;
}

.tm-show-box1 .service-box .sub-title {
    font-size: 36px;
    text-align: center;
}

.tm-show-box1 .service-box-items {
    display: flex;
    justify-content: space-between;
    position: relative;
    top: 100px;
}

.tm-show-box1 .service-box-item {
    width: 376px;
    height: 210px;
    background: #FFFFFF;
    box-shadow: 0 1px 17px 1px rgba(246, 74, 34, 0.1800);
    border-radius: 5px;
    color: #666666;
    box-sizing: border-box;
    padding: 30px;
}

.tm-show-box1 .service-box-item dt {
    height: 26px;
    line-height: 26px;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #F64A22;
    margin-bottom: 20px;
}

.tm-show-box1 .service-box-item dt img {
    display: block;
    margin-right: 10px;
}

.tm-show-box1 .service-box-item dd {
    line-height: 40px;
}

.tm-case-box {
    padding: 23px 0 0 0;
}

.tm-case-box .title {
    font-size: 38px;
    text-align: center;
    position: relative;
    width: 230px;
    margin: 0 auto 45px auto;
}

.tm-case-box .title img {
    position: absolute;
    left: -34px;
    top: -30px;
}

.tm-case-box .tabs {
    display: flex;
    justify-content: center;
    margin: 40px auto;
}

.tm-case-box .tabs a {
    display: block;
    width: 66px;
    height: 32px;
    background: #F7F7F7;
    border: 2px solid #999999;
    border-radius: 15px;
    text-align: center;
    line-height: 28px;
    margin-right: 16px;
    transition: all .5s;
}

.tm-case-box .tabs a:hover {
    background: #5E5E5E;
    color: #FFFFFF;
    border: 1px solid #5e5e5e;
}

.tm-case-box .tabs a.active {
    background: #5E5E5E;
    color: #FFFFFF;
    border: 1px solid #5e5e5e;
}

.tm-case-box .tabs a:last-child {
    margin-right: 0;
}

.tm-case-box .images-container {
    display: none;
    margin-bottom: 100px;
}

.tm-case-box .images {
    display: grid;
    grid-template-columns: repeat(4, 278px);
    grid-template-rows: repeat(2, 220px);
    grid-gap: 30px;
}

.tm-case-box .images .case-logo-image {
    width: 278px;
    height: 220px;
    overflow: hidden;
}

.tm-case-box .images img {
    transition: all .5s;
    width: 278px;
    height: 220px;
}

.tm-case-box .images img:hover {
    transform: scale(1.2);
}

.tm-advantage-box {
    background: #FFFFFF;
    padding: 100px 0 0 0;
}

.tm-advantage-box .title {
    width: 460px;
    font-size: 38px;
    position: relative;
    margin: 0 auto;
}

.tm-advantage-box .title img {
    position: absolute;
    left: -34px;
    top: -30px;
}

.tm-advantage-box .tips {
    margin: 22px auto 51px auto;
    color: #999999;
    text-align: center;
}

.tm-advantage-items {
    display: flex;
    width: 1200px;
    color: #888888;
    margin-bottom: 99px;
}

.tm-advantage-items .tm-advantage-item {
    flex-shrink: 0;
}

.tm-advantage-items .tm-advantage-item dd {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #f7f7f7;
    box-sizing: border-box;
}

.tm-advantage-items .tm-advantage-item .hd {
    font-size: 20px;
}

.tm-advantage-items .tm-advantage-title {
    width: 400px;
}

.tm-advantage-items .tm-advantage-title .hd {
    border: none;
}

.tm-advantage-items .tm-advantage-title dd {
    padding-left: 105px;
}

.tm-advantage-items .tm-advantage-positive {
    width: 400px;
    height: 421px;
    background: #FFFFFF;
    box-shadow: 0 1px 7px 1px rgba(255, 122, 73, 0.3400);
    border-radius: 5px 5px 0 0;
    color: #F64A22;
}

.tm-advantage-items .tm-advantage-positive dd {
    padding-left: 39px;
    display: flex;
    align-items: center;
}

.tm-advantage-items .tm-advantage-positive dd img {
    display: block;
    margin-right: 10px;
}

.tm-advantage-items .tm-advantage-positive dd.hd {
    background: #F64A22 !important;
    color: #FFFFFF;
    border-radius: 5px 5px 0 0;
}

.tm-advantage-items .tm-advantage-negative {
    width: 400px;
}

.tm-advantage-items .tm-advantage-negative dd.hd {
    background: #F7F7F7;
    color: #333333;
    border-radius: 5px 5px 0 0;
}

.tm-advantage-items .tm-advantage-negative dd {
    padding-left: 39px;
    display: flex;
    align-items: center;
}

.tm-advantage-items .tm-advantage-negative dd img {
    display: block;
    margin-right: 10px;
}

.tm-advantage-box .sub-title {
    width: 570px;
    font-size: 36px;
    margin: 0 auto 69px auto;
}

.tm-advantage-box .service-box {
    display: flex;
    position: relative;
    z-index: 2;
    height: 233px;
}

.tm-advantage-box .service-box .service-box-item {
    box-sizing: border-box;
    width: 550px;
    height: 517px;
    background: #FFFFFF;
    box-shadow: 0 1px 17px 1px rgba(246, 74, 34, 0.1800);
    border-radius: 5px;
    padding: 50px;
}

.tm-advantage-box .service-box .service-box-item .hd {
    width: 120px;
    color: #999999;
    margin: 0 auto;
    font-size: 30px;
    display: flex;
    justify-content: center;
}

.tm-advantage-box .service-box .lbg {
    width: 90px;
    height: 4px;
    background: #999999;
    margin: 30px auto 69px auto;
}

.tm-advantage-box .service-box .service-icons {
    display: flex;
    margin: 0 auto 0 auto;
}

.tm-advantage-box img {
    display: block;
}

.tm-advantage-box .service-box .service-icons-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
}

.tm-advantage-box .service-box .line-bg {
    height: 72px;
    background: url("../images/bg-line-process.png") center repeat;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #C4C4C4;
}

.tm-advantage-box .service-box .line-bg .process-name {
    width: 56px;
    height: 22px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -28px;
    margin-top: 15px;
    font-size: 14px;
    color: #C4C4C4;
}

.tm-advantage-box .service-box .face {
    margin-top: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #666666;
}

.tm-advantage-box .service-box .face img {
    display: block;
    margin-bottom: 13px
}

.tm-advantage-box .service-box .service-icons-item img {
    margin-bottom: 10px;
}

.tm-advantage-box .service-box .service-icons-item .name {
    font-size: 18px;
    color: #666666;
    margin-bottom: 10px;
}

.tm-advantage-box .service-box .service-icons-item .method {
    color: #999999;
}

.tm-advantage-box .service-box .positive {
    margin-left: 20px;
}

.tm-advantage-box .service-box .positive .hd {
    color: #F64A22;
}

.tm-advantage-box .service-box .positive .lbg {
    background: #F64A22;
}

.tm-advantage-box .service-box .d-line-bg {
    height: 72px;
    background: url("../images/line-bg-d.png") center repeat-x;
}

.tm-advantage-box .service-box .d-line-bg .a-right {
    transform: rotate(180deg);
    position: relative;
    top: 2px;
}

.tm-advantage-box .service-box .d-line-bg .a-left {
    position: relative;
    top: -2px;
}

.tm-advantage-box .service-box .up {
    width: 56px;
    height: 22px;
    position: absolute;
    left: 50%;
    margin-left: -28px;
    top: 0;
}

.tm-advantage-box .service-box .down {
    width: 56px;
    position: absolute;
    left: 50%;
    margin-left: -28px;
    top: 52px;
}

.tm-advantage-box .service-process {
    box-sizing: border-box;
    background: #F64A22;
    height: 675px;
    position: relative;
    z-index: 1;
    padding-top: 353px;
}

.tm-advantage-box .service-process .title {
    font-size: 38px;
    color: #FFFFFF;
    margin-bottom: 70px;
    width: auto !important;
    text-align: center;
}

.tm-advantage-box .service-process img {
    display: block;
    margin: 0 auto;
}

.tm-qa-box {
    padding: 100px 0;
}

.tm-qa-box .title {
    position: relative;
    width: 230px;
    font-size: 38px;
    margin: 0 auto 70px auto;
}

.tm-qa-box .title img {
    display: block;
    position: absolute;
    left: -34px;
    top: -30px;
}

.tm-qa-box .qa-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.tm-qa-box .qa-box-item {
    width: 360px;
    margin-bottom: 60px;
}

.tm-qa-box .qa-box-item .hd {
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    color: #666666;
}

.tm-qa-box .qa-box-item .hd .dot {
    width: 8px;
    height: 8px;
    background: #F64A22;
    border-radius: 50%;
    margin-right: 5px;
}

.tm-qa-box .qa-box-item .bd {
    color: #B8B8B8;
    line-height: 20px;
}

.about-bg {
    height: 300px;
    background: url("../images/about_bg.png") center no-repeat;
    background-size: cover;
}

.page-container {
    color: #666666;
    line-height: 30px;
    padding-top: 60px;
}

.page-container p {
    margin-bottom: 30px;
}

.page-container img {
    display: block;
    max-width: 90%;
    margin: 10px auto;
}

.author-list {
    margin-bottom: 76px;
}

.author-list .hd {
    font-size: 24px;
    color: #0F0F0E;
}

.author-list .hd span {
    font-size: 16px;
    color: #999999;
}

.author-list-container {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    grid-gap: 20px;
    margin-bottom: 30px;
}

.author-list-item {
    width: 200px;
    height: 240px;
    background: #FFFFFF;
    border-radius: 5px;
    position: relative;
}

.author-list-item .bookmark {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
}

.author-list-item a {
    display: block;
}

.author-list-item .bookmark svg g {
    fill: #9ea7b3;
}

.author-list-item .bookmark:hover svg g {
    fill: #f64a22;
}

.author-list-item .active svg g {
    fill: #f64a22;
}

.author-list-item .image {
    width: 158px;
    height: 158px;
    margin: 14px auto 14px auto;
    overflow: hidden;
    background: url("../images/loading.gif") center no-repeat;
}

.author-list-item .image img {
    transition: all .5s;
}

.author-list-item .image img:hover {
    transform: scale(1.1);
}

.author-list-item .title {
    margin-bottom: 5px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 16px;
}

.author-list-item .title a {
    color: #5E5E5E;
    font-size: 14px;
}

.author-list-item .meta {
    padding: 0 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999999;
}

.author-list-item .meta .icon {
    display: flex;
    align-items: center;
}

.author-list-item .meta .icon svg {
    margin-right: 2px;
}

.report {
    background: #FFFFFF;
    padding: 60px 0 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.report .title {
    font-size: 38px;
    color: #333333;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 52px;
}

.report .title img {
    display: block;
    margin-right: 14px;
}

.report .bd {
    width: 582px;
    margin: 0 auto 0 auto;
}

.report .bd .form-item {
    display: flex;
    margin-bottom: 30px;
}

.report .bd .form-item label {
    width: 70px;
    height: 60px;
    line-height: 60px;
    margin-right: 23px;
    font-size: 16px;
    color: #666666;
}

.report .bd .form-item input {
    flex: 1;
    display: block;
    height: 60px;
    background: #F7F7F7;
    border-radius: 5px;
    border: none;
    padding: 0 23px;
    font-size: 16px;
    color: #999999;
}

.report .bd .form-item textarea {
    flex: 1;
    display: block;
    height: 120px;
    background: #F7F7F7;
    border-radius: 5px;
    border: none;
    padding: 23px;
    font-size: 16px;
    color: #999999;
}

.report .bd .btn {
    display: block;
    width: 180px;
    height: 60px;
    background: #F64A22;
    border-radius: 5px;
    margin: 0 auto;
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    transition: all .5s;
}

.report .bd .btn:hover {
    background: #f9795c;
    color: #FFFFFF;
}

.confirm-page {

}

.confirm-page .title {
    padding: 39px 0;
    font-size: 36px;
    text-align: center;
    font-weight: bold;
}

.confirm-page .confirm-box-container {
    display: flex;
    justify-content: space-between;
}

.confirm-page .confirm-box-container .confirm-box {

}

.confirm-page .confirm-box-container .confirm-box .hd {
    font-size: 16px;
    color: #5E5E5E;
    margin-bottom: 36px;
}

.confirm-page .confirm-box-container .confirm-box .hd h2 {
    font-weight: bold;
    font-size: 24px;
    color: #000000;
    margin-bottom: 16px;
}

.confirm-page .confirm-box-container .confirm-box .hd a {
    color: #F2530F;
}

.confirm-page .confirm-box-container .confirm-box .bd {
}

.confirm-page .confirm-box-container .logo-sample .bd {
    background: #FFFFFF;
    width: 480px;
    height: 384px;
}

.confirm-page .confirm-box-container .confirm-box .bd img {
    width: 480px;
    height: 384px;
}

.confirm-page .confirm-box-container .price-box {

}

.confirm-page .confirm-box-container .price-box .bd {
    display: flex;
}

.confirm-page .confirm-box-container .price-box-item {
    width: 350px;
    height: 477px;
    background: #FFFFFF;
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s;
}

.confirm-page .confirm-box-container .price-box-item .rec-tops {
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 16px
}

.confirm-page .confirm-box-container .price-box-item .price-box-item-padding {
    padding: 0 15px;
}

.confirm-page .confirm-box-container .price-name {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.confirm-page .confirm-box-container .price-name .price-tag {
    height: 26px;
    background: #FBFBFB;
    border: 2px solid #F2530F;
    border-radius: 12px;
    padding: 0 10px;
    font-size: 14px;
    color: #F2530F;
    margin-left: 19px;
}

.confirm-page .confirm-box-container .price-container {
    display: flex;
    height: 30px;
    align-items: center;
}

.confirm-page .confirm-box-container .price-container .price {
    font-size: 36px;
    font-weight: bold;
    color: #F2530F;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    margin-right: 10px;
}

.confirm-page .confirm-box-container .price-container .price-des-container {
}

.confirm-page .confirm-box-container .price-container .price-des {
    font-size: 13px;
    line-height: 14px;
}

.confirm-page .confirm-box-container .price-container .price-des:first-child {
    margin-bottom: 2px;
}

.confirm-page .confirm-box-container .price-choose-btn {
    height: 48px;
    background: #FBFBFB;
    border: 2px solid #F2530F;
    text-align: center;
    line-height: 48px;
    color: #F2530F;
    margin: 22px 0;
    transition: all 0.2s;
}

.confirm-page .confirm-box-container .checked {
    box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.09);
}

.confirm-page .confirm-box-container .price-box-vip .rec-tops {
    background: #F2530F;
}

.confirm-page .confirm-box-container .checked .price-choose-btn {
    background: #F2530F;
    color: #FFFFFF;
}

.confirm-page .confirm-box-container .price-advantage {

}

.price-advantage .price-advantage-item {
    height: 35px;
    line-height: 35px;
    background: url("../images/icon-correct.svg") left center no-repeat;
    padding-left: 28px;
}

.price-advantage .active {
    color: #F2530F;
}

.price-advantage .divider {
    height: 1px;
    background: #E6E6E6;
    margin: 6px 0;
}

.confirm-page .pay-box {
    height: 363px;
    background: #FFFFFF;
    border: 2px solid #F2530F;
    box-shadow: 0 1px 7px 0 rgba(242, 83, 15, 0.2);
    border-radius: 5px;
    margin: 69px 0 0 0;
    display: flex;
    padding: 31px;
    font-size: 16px;
}

.confirm-page .pay-box .pay-box-title {
    background: url("../images/icon-scan.png") left center no-repeat;
    height: 25px;
    line-height: 25px;
    padding-left: 30px;
    margin-right: 80px;
}

.confirm-page .pay-box .qrcode-container {
    text-align: center;
    margin-right: 142px;
}

.confirm-page .pay-box .qrcode-container .qrcode {
    width: 266px;
    height: 266px;
    background: #FFFFFF;
    box-shadow: 0 1px 7px 0 rgba(242, 83, 15, 0.2);
    border-radius: 5px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.confirm-page .pay-box .qrcode-container .qrcode .qr-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 266px;
    height: 266px;
    background-color: rgba(0, 0, 0, 0.11);
    display: none;
    align-items: center;
    justify-content: center;
}

.confirm-page .pay-box .qrcode-container .qrcode .qr-button {
    cursor: pointer;
    background: #FFFFFF;
    text-align: center;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
}


.confirm-page .pay-box .qrcode-container .tips {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-page .pay-box .qrcode-container .tips img {
    margin-right: 3px;
}

.confirm-page .pay-box .qrcode-container .qrcode .qr-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 266px;
    height: 266px;
    background: url("../images/loading2.gif") center no-repeat rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;

}


.confirm-page .pay-box .pay-info {
    margin-top: 67px;
}

.confirm-page .pay-box .pay-info .pay-money {
    height: 40px;
    font-size: 20px;
    margin-bottom: 5px;
}

.confirm-page .pay-box .pay-info .pay-money .money {
    font-size: 48px;
    color: #F64A22;
}

.confirm-page .pay-box .pay-info .pay-money .unit {
    color: #F64A22;
    font-size: 24px;
}

.confirm-page .pay-box .tips {
    color: #B4B4B4;
    font-size: 14px;
}

.confirm-page .download-box {
    background: #FFFFFF;
    border: 2px solid #F2530F;
    box-shadow: 0 1px 7px 0 rgba(242, 83, 15, 0.2);
    border-radius: 5px;
    margin: 69px 0 0 0;
    padding: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s;
}

.confirm-page .download-btn:hover {
    background: #f9795c;
    color: #FFFFFF;
}

.download-box-container {
    display: flex;
}

.download-box-container .d-left {
    width: 310px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 206px;
    margin-right: 182px;
}

.download-box-container .d-right {
    font-size: 18px;
    color: #333333;
    width: 266px;
    margin-top: 30px;
}

.download-box-container .qr-tips {
    text-align: center;
    padding-top: 20px;
}

.download-box-container .d-right-container {
    width: 266px;
    height: 266px;
    background: #FFFFFF;
    box-shadow: 0 1px 7px 0 rgba(242, 83, 15, 0.2);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-box-container .hd {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
}

.download-box-container .tips {
    font-size: 16px;
    height: 32px;
    background: #F7DE96;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: #482121;
    padding: 0 10px;
    justify-content: center;
}
.download-box-container .tips img{
    margin-right: 5px;
}

.download-box-container .zip {
    margin: 27px 0 10px 0;
    color: #999999;
    text-align: center;
}

.download-box-container .zip img {
    display: block;
    margin-bottom: 5px;
}

.download-box-container .download-btn {
    width: 310px;
    height: 70px;
    background: #F64A22;
    border-radius: 35px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin-top: 34px;
}

.download-box-container .download-btn img {
    margin-right: 5px;
}

.sample {
    display: flex;
    justify-content: space-between;
    margin: 44px auto;
}

.sample .sample-item {
    width: 386px;
    height: 304px;
    background: #FFFFFF;
    border-radius: 5px;
    position: relative;
}

.sample .sample-item1 {
    background: url("../images/sample_card.png?t=2") #FFFFFF center no-repeat;
}

.sample .sample-item1 img {
    position: absolute;
    top: 20px;
    right: -20px;
}

.sample .sample-item2 {
    background: url("../images/sample_computer.png") #FFFFFF center no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sample .sample-item2 img {

}

.sample .sample-item3 {
    background: url("../images/sample_logo.png") #FFFFFF center no-repeat;
}

.sample .sample-item3 img {
    position: absolute;
    left: 60px;
    top: 60px;
}

.ucenter-header {
    height: 100px;
    background: #000000;
    display: flex;
    align-items: center;
}

.ucenter-header .navigator {
    padding-top: 0;
    display: flex;
    justify-content: space-between;
}

.ucenter-main {
    display: flex;
}

.ucenter-main .ucenter-menu {
    width: 313px;
    background: #FFFFFF;
    min-height: 710px;
    font-size: 16px;
    padding: 30px 0;
    flex-shrink: 0;
}

.ucenter-main .ucenter-menu a {
    display: flex;
    height: 56px;
    align-items: center;
    padding-left: 36px;
    color: #999999;
}

.ucenter-main .ucenter-menu a svg {
    margin-right: 10px;
}

.ucenter-main .ucenter-menu a:hover {
    background-color: #FFF9F6;
    color: #F64A22;
}

.ucenter-main .ucenter-menu a:hover svg path {
    fill: #F64A22;
}

.ucenter-main .ucenter-menu a.active {
    background-color: #FFF9F6;
    color: #F64A22;
}

.ucenter-main .ucenter-menu a.active svg path {
    fill: #F64A22;
}

.ucenter-main .ucenter-stage {
    padding: 31px 0 31px 31px;
    width: 100%;
}

.ucenter-main .ucenter-stage .hd {
    height: 22px;
    font-size: 24px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 44px;
}

.ucenter-main .ucenter-stage .tips {
    color: #F2530F;
    margin-bottom: 20px;
}

.ucenter-main .ucenter-stage .ucenter-logo-list {
    display: flex;
    flex-wrap: wrap;
    min-height: 560px;
    align-content: flex-start;
}

.ucenter-main .ucenter-logo-list .ucenter-logo-item {
    width: 240px;
    height: 192px;
    background: #FFFFFF;
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;

}

.ucenter-main .ucenter-logo-list .ucenter-logo-item .action-mask {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    width: 240px;
    height: 192px;
}

.ucenter-main .ucenter-logo-list .ucenter-logo-item .action-mask-container {
    width: 240px;
    height: 192px;
    padding: 14px;
    background-color: rgba(0, 0, 0, 0.11);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ucenter-main .ucenter-logo-list .ucenter-logo-item .action-mask a {
    width: 60px;
    height: 30px;
    background: #FFFFFF;
    border-radius: 5px;
    color: #999999;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
}

.ucenter-main .ucenter-stage-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 100px);
    flex-direction: column;
}

.ucenter-main .contact {
    width: 466px;
    height: 356px;
    background: url("../images/contact_bg.png") center top no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ucenter-main .ucenter-stage-contact .tips-mgs {
    font-size: 16px;
    color: #666666;
    margin-top: 15px;
}

.ucenter-main .empty-container {
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ucenter-stage-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 100px);
}

.ucenter-stage-profile .profile {
    width: 430px;
    height: 480px;
    display: flex;
    flex-direction: column;
}

.ucenter-stage-profile .profile .avatar {
    width: 70px;
    height: 70px;
    margin-bottom: 30px;
}

.ucenter-stage-profile .profile .avatar img {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
}

.ucenter-stage-profile .profile .profile-item {
    height: 67px;
    border-bottom: 1px solid #eeeeee;
    width: 100%;
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 16px;
}

.ucenter-stage-profile .profile .profile-item .label {
    width: 105px;
}

.ucenter-stage-profile .profile .profile-item .input-username {
    display: block;
    background: #f7f7f7;
    height: 66px;
    border: none;
    color: #666666;
    font-size: 16px;
}

.ucenter-stage-profile .profile .profile-item .bind-action {
    flex: 1;
    color: #999999;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ucenter-stage-profile .button-bind {
    width: 90px;
    height: 36px;
    background: #F2530F;
    border-radius: 5px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ucenter-stage-profile .btn-send {
    width: 90px;
    height: 36px;
    background-color: #f64a22;
    color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ucenter-stage-profile .btn-submit {
    width: 90px;
    height: 36px;
    background-color: #f64a22;
    color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
.topic-list{
    width: 1200px;
    margin: 0 auto;
}
.topic-list .container{
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
}
.topic-list .list-item{
    width: 285px;
    height: 299px;
    background: #FFFFFF;
    position: relative;
    border-radius: 5px;
    margin-right: 18px;
    margin-bottom: 30px;
    padding: 20px;
}
.topic-list .list-item:hover {
    box-shadow: 0 1px 19px 2px rgb(0 0 0/10%);
}
.topic-list .last{
    margin-right: 0;
}
.topic-list .list-item .cover{
    width: 194px;
    height: 194px;
    margin: 0 auto;
}
.topic-list .list-item .title{
    color: #5E5E5E;
    font-weight: lighter;
    font-size: 16px;
    text-align: center;
    padding-top: 15px;
}
.topic-list .list-item .meta{
    height: 54px;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topic-list .list-item .meta .icon{
    display: flex;
    align-items: center;
}
.topic-list .list-item .meta .icon svg{
    margin-right: 5px;
}
.topic-list .list-item .separator{
    padding: 0 10px;
}

.scene-keywords-box{
    display: flex;
    padding-bottom: 25px;
}
.scene-keywords-box a{
    display: block;
    padding: 0 10px;
    height: 28px;
    line-height: 26px;
    background: #F7F7F7;
    border: 1px solid #5E5E5E;
    border-radius: 10px;
    text-align: center;
    margin-right: 18px;
    transition: background-color .5s;
}
.scene-keywords-box a:hover {
    background: #5E5E5E;
    color: #FFFFFF;
}

.scene-keywords-box a.active {
    background: #5E5E5E;
    color: #FFFFFF;
}

.js_share_dialog{

}
.js_share_dialog .weui-dialog__title{
    padding: 30px 0;
    font-size: 20px;
}
.js_share_dialog .weui-dialog{
    background: #EFEFEF;
    border-radius: 5px;
    width: 700px !important;
}
.js_share_dialog .weui-dialog .share_dialog_container{
    position: relative;
}
.js_share_dialog .weui-dialog .share_dialog_container .weui-icon-close{
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
.js_share_dialog .share-img{
    width: 470px;
    background: #FFFFFF;
    margin: 0 auto;
}
.js_share_dialog .share-input-container{
    height: 53px;
    display: flex;
    width: 617px;
    margin: 35px auto auto auto;
}
.js_share_dialog .share-input-container .share-input{
    display: flex;
    flex: 1;
    height: 53px;
    align-items: center;
    background: #FFFFFF;
    border: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 0 20px;
    font-size: 16px;
    color: #595959;
}
.js_share_dialog .share-input-container .btn-copy{
    width: 82px;
    height: 53px;
    background: #F64A22;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #FFFFFF;
    transition: background-color .5s;
}
.js_share_dialog .share-input-container .btn-copy:hover{
    background-color: #f9795c;
}

.share-header{
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background-color: #FFFFFF;
}
.share-box{
    width: 600px;
    margin: 30px auto 60px auto;
}
.share-box .title{
    font-size: 24px;
    padding: 30px 0;
}
.share-box .preview-box{
    position: relative;
    background: #FFFFFF;
}
.share-box .preview-box .edit-btn{
    width: 145px;
    z-index: 50;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #dddddd;
    text-align: center;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: #FFFFFF;
    transition: all .5s;
}
.share-box .preview-box .edit-btn:hover{
    color:  #f64a22;
    border-color:  #f64a22;
}
.share-box .preview-box .edit-btn img{
    margin-right: 5px;
}

.login-wechat-pop2 {
    width: 730px;
    height: 500px;
    background: url("https://static.niurensheji.com/static/pc/images/login-wechat-bg.png") center no-repeat;
    border-radius: 50px;
}

.login-wechat-pop2-container {
    position: relative;
    width: 730px;
    height: 500px;
}

.login-wechat-pop2 .iclose {
    right: 30px;
    top: 20px;
}

.login-wechat-pop2 .hd {

}
.mpcode {
    display: block;
    width: 200px;
    height: 200px;
}
.login-wechat-pop2 .tab-wechat {
    position: absolute;
    left: 416px;
    top: 170px;
}

.login-wechat-pop2 .qrcode {
    position: relative;
    border-radius: 20px;
    background: #FFFFFF;
}

.login-wechat-pop2 .qrcode-timout {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
}

.login-wechat-pop2 .qrcode-timout .loading2 {
    color: #FFFFFF;
    margin-bottom: 10px;
}

.login-wechat-pop2 .links {
    position: absolute;
    border: 0;
    right: 60px;
    bottom: 18px;
    font-size: 18px;
}
.login-wechat3-pop{
    width: 500px;
}
.login-wechat3-pop .close{
    top: 20px;
}
.bind-qr2-container{
    margin: 20px 0;
    position: relative;
}
.login-wechat3-pop .qrcode-timout {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
}

.login-wechat3-pop .qrcode-timout .loading2 {
    color: #FFFFFF;
    margin-bottom: 10px;
}
.bind-qr2-title{
    font-size: 22px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    padding: 10px 0;
}
.social .icon-wechat{
    display: flex;
    flex-direction: column;
    color: #333333;
    align-items: center;
    justify-content: center;
}

@keyframes rotation {
    100% {
        transform: rotate(360deg);
    }
}